var QcFormSetting = function () {
  var QcDetailForm = function () {
    var template = /* html */ `
      <div class="qc-detail-form">
        <el-form label-width="auto">
          <el-form-item required label="qc内容">
            <el-input v-model="detail.content"></el-input>
          </el-form-item>
          <el-form-item label="默认值">
            <el-input v-model="detail.defalutValue"></el-input>
          </el-form-item>
          <!--<el-form-item label="图片">
            <imgs-upload v-model="detail.imgs" :limit="4"></imgs-upload>
          </el-form-item>
          <el-form-item label="视频">
            <video-upload ref="videoUpload" v-model="detail.video"></video-upload>
          </el-form-item>-->
        </el-form>
        <div style="text-align:center">
          <el-button type="primary" @click="ensure">
            <span v-if="type==='add'">新增</span>
            <span v-else>修改</span>
          </el-button>
        </div>
      </div>
    `;

    return {
      props: {
        detailData: {
          type: Object,
          default: function () {
            return null;
          }
        },
        type: {
          type: String,
          required: true
        }
      },

      data: function () {
        var detail;
        if (this.type === 'add') {
          detail = new ProcessQcDetailModel();
        } else {
          detail = _.cloneDeep(this.detailData);
        }
        return {
          detail: detail
        };
      },

      methods: {
        ensure: function () {
          var detail = this.detail;
          var code = detail.checkValid();
          if (code !== '') {
            var msg = i18n.getMsg(`productMgr.workProcessTable.error.${code}`)
            this.$alert(msg, '信息');
            return;
          }

          this.$emit('save-click', detail);
        }
      },

      components: {
        ImgsUpload: ImgsUpload,
        VideoUpload: VideoUpload
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="qc-form-setting" v-loading.fullscreen.lock="loading">
      <template v-if="processSetting!==null">
      <div class="qc-form-header">
        <el-form inline size="medium">
          <el-form-item label="部门：">
            <span>{{workProcess.deptName}}</span>
          </el-form-item>
          <el-form-item label="车间：">
            <span>{{workProcess.workshopName}}</span>
          </el-form-item>
          <el-form-item label="工序：">
            <span>{{workProcess.processName}}</span>
          </el-form-item>
          <el-form-item label="自检时间：">
            <el-input-number is-decimal-zero class="setting-input" v-model="processSetting.selfCheckTime" :min="0" :max="24" :precision="2"
              controls-position="right">
            </el-input-number>
          </el-form-item>
          <el-form-item label="巡检时间：">
            <el-input-number is-decimal-zero class="setting-input" v-model="processSetting.siteCheckTime" :min="0" :max="24" :precision="2"
              controls-position="right">
            </el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addDetail">新增工序qc</el-button>
            <el-button type="primary" @click="saveSetting">保存设置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="qc-form-table-div">
        <el-table fit stripe border :data="detailList" style="width: 100%" height="parent">
          <el-table-column label="qc内容" prop="content" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="默认值" prop="defalutValue" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="操作" width="140px" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="updateDetail(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteDetail(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      </template>

      <el-dialog append-to-body :title="detailType==='add'?'新增工序qc':'修改工序qc'" :visible.sync="openDetail" width="80%" top="10vh" @closed="dialogClosed">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <qc-detail-form v-if="openDetail" :type="detailType" :detail-data="detailData" @save-click="toSaveDetail">
          </qc-detail-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      workProcess: {
        type: Object,
        required: true
      }
    },

    computed: {
      detailList: function () {
        var processSetting = this.processSetting;
        if (processSetting === null) {
          return [];
        }
        return processSetting.detailList;
      }
    },

    data: function () {
      return {
        loading: false,
        processSetting: null,
        openDetail: false,
        detailData: null,
        detailType: ''
      };
    },

    created: function () {
      this.setProcessSetting();
    },

    methods: {
      setProcessSetting: function () {
        var id = this.workProcess.id;
        this.loading = true;
        var self = this;
        ajaxRequest('procedure/getProcessQCTableByProcessId', {
          processId: id,
          type: 2
        }).then(function (res) {
          res = res[0];
          var workProcess = self.workProcess;
          var processSetting = new ProcessQcFormModel(workProcess, res);
          self.processSetting = processSetting;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      addDetail: function () {
        this.detailType = 'add';
        this.openDetail = true;
      },

      updateDetail: function (detail) {
        this.detailData = detail;
        this.detailType = 'update';
        this.openDetail = true;
      },

      toSaveDetail: function (detail) {
        if (this.detailType === 'add') {
          this.processSetting.addDetail(detail);
        } else {
          this.processSetting.updateDetail(detail, this.detailData);
        }
        this.openDetail = false;
      },

      dialogClosed: function () {
        this.detailType = '';
        this.detailData = null;
      },

      deleteDetail: function (detail) {
        var self = this;
        this.$confirm('是否确定删除该条工序qc？', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.processSetting.deleteDetail(detail);
        }).catch(function () {});
      },

      saveSetting: function () {
        var processSetting = this.processSetting;
        var code = processSetting.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`productMgr.workProcessTable.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        var postData = processSetting.getObject();
        this.loading = true;
        var self = this;
        ajaxRequest('procedure/setProcessQCTable', postData).then(function (msg) {
          self.$alert('工序qc成功设置', '信息', {
            callback: function () {
              self.$emit('setting-success');
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      QcDetailForm: QcDetailForm
    },

    template: template
  };
}();
